<template>
    <div class="sifter-box flex-row-center" v-if="isEdit==0">
        <el-form :inline="true" :model="sifterForm" class="demo-form-inline">
            <el-form-item label="筛选：">
                <el-input v-model="sifterForm.key" placeholder="输入招聘关键字" @input="proxy.$utils.debounce(updalist,sifterForm)"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-select v-model="sifterForm.state" placeholder="请选择状态" clearable @change="typeChange">
                    <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div>
            <el-button type="primary" plain :loading="false" @click.prevent="editData('',1)">添加</el-button>
        </div>
    </div>

    <div class="listDiv" v-if="isEdit==0">
        <el-table :data="list" stripe style="width: 100%">
            <el-table-column prop="name" label="岗位名称" width="140"> </el-table-column>
            <el-table-column prop="type" label="分类" width="140">
                <template #default="props">
                    <span>{{proxy.$utils.findObj(props.row.type,globalData.recruitTypes,'value').text}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="num" label="招聘人数" width="100"> </el-table-column>
            <el-table-column prop="edu" label="学历要求" width="140">
                <template #default="props">
                    <span>{{proxy.$utils.findObj(props.row.edu,globalData.eduList,'value').text}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="nature" label="工作性质">
                <template #default="props">
                    <span>{{+props.row.nature?'兼职':'全职'}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="" label="薪资" width="100">
                <template #default="props">
                    <span>
                        {{((props.row.salary_start/1000).toFixed(1)-(props.row.salary_start/1000).toFixed(0))>0?(props.row.salary_start/1000).toFixed(1):(props.row.salary_start/1000).toFixed(0)}}～{{((props.row.salary_end/1000).toFixed(1)-(props.row.salary_end/1000).toFixed(0))?(props.row.salary_end/1000).toFixed(1):(props.row.salary_end/1000).toFixed(0)}}K
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="" label="工作年限/年" width="120">
                <template #default="props">
                    <span>{{props.row.working_duration_start}}～{{props.row.working_duration_end}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="" label="搜索人才">
                <template #default="props">
                    <span class="pointer base-color" @click="editData(props.row,4)">搜索人才</span>
                </template>
            </el-table-column>
            <el-table-column prop="verify_state" label="招聘状态" width="160">
                <template #default="props">
                    <el-switch v-model="props.row.state" active-color="#13ce66" active-text="招聘中" active-value="1" inactive-color="#ff4949" inactive-text="暂停" inactive-value="0" size="small" @change="setState(props.$index, props.row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="" label="操作" width="80">
                <template #default="props">
                    <span v-if="props.row.isme!=0" class="pointer mr10" @click="editData(props.row,2)"><el-icon color="#409EFC"><edit/></el-icon></span>
                    <span v-if="props.row.isme!=0" class="pointer" @click="delData(props.row)"><el-icon color="#F56C6C"><delete /></el-icon></span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pd20 w100 flex-row-center ju-flex-end">
            <el-pagination
                v-model:currentPage="sifterForm.currentpage"
                v-model:page-size="sifterForm.pagesize"
                :page-sizes="[10, 20, 50, 100]" :total="total"
                @size-change="()=>{updalist()}"
                @current-change="()=>{updalist()}"
                layout="total, sizes, prev, pager, next, jumper"  background/>
        </div>
    </div>

    <div class="edit-box" v-if="isEdit!=0">
        <div class="title-box flex-row-center">
            <span class="pointer return flex-row-center mr10" @click="re_turn"><el-icon><back /></el-icon></span>
            <span v-if="isEdit==1||isEdit==2">{{isEdit==1?'添加':'编辑'}}招聘</span>

            <span v-if="isEdit==4" class="mr20">{{form.name}}-匹配到的人才</span>
            <!-- <span v-if="isEdit==4" class="pointer base-color base-size">聊天记录</span> -->
            <!-- <el-form v-if="isEdit==4" :inline="true" :model="sign_sifterForm" class="demo-form-inline">
                <el-form-item label="筛选：">
                    <el-date-picker v-model="sign_sifterForm.day" type="dater" value-format="YYYY-MM-DD"  align="right" @change="sign_updalist(sign_sifterForm)" @clear="sign_updalist(sign_sifterForm)"></el-date-picker>
                </el-form-item>
            </el-form> -->
        </div>
        <div class="form-box">
            <el-form v-if="isEdit==1||isEdit==2" ref="ruleFormRef" :inline="true" :model="form" :rules="rules" label-width="140px" class="demo-ruleForm">
                <el-form-item class="w96" :rules="[ { required: true, message: '岗位名称不能为空'} ]" label="岗位名称" prop="name">
                    <el-input autocomplete="off" clearable v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item :rules="[ { required: true, message: '职位分类不能为空'} ]" label="职位分类" prop="type">
                    <el-select v-model="form.type" placeholder="请选择职位分类" clearable>
                        <el-option v-for="item in globalData.recruitTypes" :key="item.value" :label="item.text" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :rules="[ { required: true, message: '招聘人数不能为空'} ]" label="招聘人数" prop="num">
                    <el-input autocomplete="off" clearable v-model="form.num"></el-input>
                </el-form-item>
                <br/>
                <el-form-item class="w96" :rules="[ { required: true, message: '工作地点不能为空'} ]" label="工作地点" prop="address">
                    <el-input autocomplete="off" clearable v-model="form.address"></el-input>
                </el-form-item>
                <br/>
                <el-form-item class="w96" :rules="[ { required: true, message: '岗位职责不能为空'} ]" label="岗位职责" prop="responsibilities">
                    <el-input type="textarea" show-word-limit maxlength="1000" :autosize="{minRows:10}" autocomplete="off" clearable v-model="form.responsibilities"></el-input>
                </el-form-item>
                <br/>
                <el-form-item class="w96" :rules="[ { required: true, message: '任职要求不能为空'} ]" label="任职要求" prop="requirement">
                    <el-input type="textarea" show-word-limit maxlength="1000" :autosize="{minRows:10}" autocomplete="off" clearable v-model="form.requirement"></el-input>
                </el-form-item>
                <br/>
                <el-form-item :rules="[ { required: true, message: '薪资上限不能为空'} ]" label="薪资上限/元" prop="salary_end">
                    <el-input-number v-model="form.salary_end" :min="0" :max="1000000000" @change="numberChange(false,'salary_end','salary_start','薪资上限需大于薪资下限')"/>
                </el-form-item>
                <el-form-item :rules="[ { required: true, message: '薪资下限不能为空'} ]" label="薪资下限/元" prop="salary_start">
                    <el-input-number v-model="form.salary_start" :min="0" :max="1000000000" @change="numberChange(true,'salary_start','salary_end','薪资上限需大于薪资下限')" />
                </el-form-item>
                <br/>
                <el-form-item :rules="[ { required: true, message: '工作年限上限不能为空'} ]" label="工作年限上限/年" prop="working_duration_end">
                    <el-input-number v-model="form.working_duration_end" :step="1" :min="0" :max="100" @change="numberChange(false,'working_duration_end','working_duration_start','工作年限上限需大于工作年限下限')" />
                </el-form-item>
                <el-form-item :rules="[ { required: true, message: '工作年限下限不能为空'} ]" label="工作年限下限/年" prop="working_duration_start">
                    <el-input-number v-model="form.working_duration_start" :step="1" :min="0" :max="100" @change="numberChange(true,'working_duration_start','working_duration_end','工作年限上限需大于工作年限下限')" />
                </el-form-item>
                <br/>
                <el-form-item :rules="[ { required: true, message: '最低学历不能为空'} ]" label="最低学历" prop="edu">
                    <el-select v-model="form.edu" placeholder="请选择学历" clearable>
                        <el-option v-for="item in globalData.eduList" :key="item.value" :label="item.text" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :rules="[ { required: true, message: '工作性质不能为空'} ]" label="工作性质" prop="nature">
                    <el-select v-model="form.nature" placeholder="请选择工作性质" clearable>
                        <el-option v-for="item in globalData.jobTypeList" :key="item.value" :label="item.text" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <br/>
                <el-form-item label=" " label-width="140px">
                    <el-button type="primary" class="btn" :loading="false" @click.prevent="submit" native-type="submit">提交</el-button>
                </el-form-item>
            </el-form>

            <div v-if="isEdit==4" class="">
                <el-table :data="persion_list" stripe style="width: 100%">
                    <el-table-column prop="name" label="人才姓名"> </el-table-column>
                    <el-table-column prop="sex" label="性别">
                        <template #default="props">
                            <span>{{proxy.$utils.findObj(props.row.sex,globalData.sexAry,'value').text}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="age" label="年龄"> </el-table-column>
                    <el-table-column prop="workyear" label="工作经验/年"> </el-table-column>
                    <el-table-column prop="major" label="专业"> </el-table-column>
                    <el-table-column prop="edu" label="学历">
                        <template #default="props">
                            <span>{{proxy.$utils.findObj(props.row.edu,globalData.eduList,'value').text}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="" label="操作" fixed="right" width="150">
                        <template #default="props">
                            <span class="pointer mr10 base-color" @click="sendinterview(props.row)">邀请面试</span>
                            <span class="pointer ml10 base-color" @click="showchart(props.row)">聊天</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pd20 w100 flex-row-center ju-flex-end">
                    <el-pagination
                        v-model:currentPage="persion_sifterForm.currentpage"
                        v-model:page-size="persion_sifterForm.pagesize"
                        :page-sizes="[10, 20, 50, 100]" :total="persion_total"
                        @size-change="()=>{persion_updalist(persion_sifterForm)}"
                        @current-change="()=>{persion_updalist(persion_sifterForm)}"
                        layout="total, sizes, prev, pager, next, jumper"  background/>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup>
    import { reactive,ref,getCurrentInstance,toRefs,toRaw } from 'vue'
    import { Back,Edit,Delete } from '@element-plus/icons-vue'
    import Editer from '../../components/editer.vue'

    let { proxy } = getCurrentInstance()
    let obj = reactive({
        isEdit: 0,
        total: 0,
        list:[],
        sifterForm: {
            key: '',
            state: '',
            currentpage: 1,
            pagesize: 10
        },
        form: {
            "job_id":"",
            "name":"",
            "responsibilities":"",
            "requirement":"",
            "salary_start":"",
            "salary_end":"",
            "working_duration_start":"",
            "working_duration_end":"",
            "edu":"",
            "nature":""
        },
        ruleFormRef: null,
        types: [
            {id: "0", name: "停用"},
            {id: "1", name: "正常"},
        ],

        persion_total: 0,
        persion_list:[],
        persion_sifterForm: {
            "job_id":"",
            currentpage: 1,
            pagesize: 10
        },
    });

    const updalist = (form)=>{
        let param = {
            ...obj.sifterForm,
            ...form
        }
        proxy.$ajax({url: 'recruit/list',data: param,bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                total.value = d.msg.count||0
                list.value = d.msg.list;
            }else{}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }
    updalist();

    const showchart =(row)=>{
        proxy.routerPushNewMixin('/chartpersiondetail',{job_id:form.value.job_id,persion_id:row.persion_id,persionname:row.name})
    }

    const typeChange = (e)=>{
        if(e){
            sifterForm.value.state = e
            updalist(obj.sifterForm)
        }else{
            sifterForm.value.state = ''
            updalist(obj.sifterForm)
        }
    }

    const numberChange = (comparesmall,key,key_,tip)=>{
        if((comparesmall&&form.value[key]>form.value[key_])||(!comparesmall&&form.value[key]<form.value[key_])){
            proxy.elMessageMixin(tip, 'error')
            form.value[key] = 0.0
        }
    }

    // 设置招聘状态
    const setState = (index, item)=> {
        proxy.$ajax({url: 'recruit/setstate',data:{job_id:item.job_id},bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                proxy.elMessageMixin('设置成功！', 'success')
                list.value[index].state = row.state==0?1:0
                // updalist()
            }else{
                proxy.elMessageMixin(date.err, 'error')
                list.value[index].state = row.state==0?0:1
            }
        }).catch(e => {
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }

    const delData = (item)=>{
            proxy.$ajax({url: 'recruit/delete',data:{job_id:item.job_id},bfLoading: true}).then(d => {
                console.log(d);
                if(d.success){
                    proxy.elMessageMixin('删除成功！', 'success')
                    updalist()
                }else{proxy.elMessageMixin(date.err, 'error')}
            }).catch(e => {
                if(e == "登录已过期，请重新登录"){
                    proxy.routerPushMixin('/')
                }
            })
    }

    const re_turn = ()=>{
        isEdit.value = 0;
        form.value = {
            "job_id":"",
            "name":"",
            "responsibilities":"",
            "requirement":"",
            "salary_start":"",
            "salary_end":"",
            "working_duration_start":"",
            "working_duration_end":"",
            "edu":"",
            "nature":""
        }
    }

    const editData = (item,isEditidx)=>{
        console.log(item);
        if(item&&isEditidx==2){
            proxy.$ajax({url: 'recruit/get',data:{job_id:item.job_id},bfLoading: true}).then(d => {
                console.log(d);
                if(d.success){
                    form.value = {
                        ...d.msg,
                        job_id: item.job_id
                    }
                    isEdit.value = 2
                }else{}
            }).catch(e => {
                console.log(e)
                if(e == "登录已过期，请重新登录"){
                    proxy.routerPushMixin('/')
                }
            })
        }else if(isEditidx==1){
            isEdit.value = 1
        }else if(isEditidx==4){
            form.value = item
            persion_sifterForm.value.job_id = item.job_id
            persion_updalist(persion_sifterForm.value)
            isEdit.value = 4
        }
    }
    const persion_updalist = (form)=>{
        let param = {
            ...form,
        }
        console.log(param);
        proxy.$ajax({url: 'job/search/persion',data:param,bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                persion_total.value = d.msg.count||0
                persion_list.value = d.msg.list;
            }else{}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }

    const submit = ()=>{
      if (ruleFormRef) {
        ruleFormRef.value.validate((valid) => {
          if (valid) {
                console.log(form.value);
                let param = {
                    ...form.value,
                    job_id:form.value.job_id||0
                }
                // return
                proxy.$ajax({url: 'recruit/design',data:param,bfLoading: true}).then(d => {
                    console.log(d);
                    if(d.success){
                        form.value = {
                            "job_id":"",
                            "name":"",
                            "responsibilities":"",
                            "requirement":"",
                            "salary_start":"",
                            "salary_end":"",
                            "working_duration_start":"",
                            "working_duration_end":"",
                            "edu":"",
                            "nature":""
                        }
                        proxy.elMessageMixin('编辑成功！', 'success')
                        isEdit.value = 0
                        updalist()
                    }else{proxy.elMessageMixin(date.err, 'error')}
                }).catch(e => {
                    console.log(e)
                    if(e == "登录已过期，请重新登录"){
                        proxy.routerPushMixin('/')
                    }
                })
          } else {
            return false;
          }
        });
      }
    }

    // 邀请面试
    const sendinterview = (item)=>{
        let param = {
            "job_id": form.value.job_id,
            "persion_id": item.persion_id
        }
        console.log(item);
        proxy.$ajax({url: 'persion/apply',data:param,bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                proxy.elMessageMixin('邀请成功！', 'success')
            }else{proxy.elMessageMixin(date.err, 'error')}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }
    
    let { list, sifterForm, form, isEdit, ruleFormRef, types, total,persion_sifterForm,persion_total,persion_list } = toRefs(obj)
</script>

<style lang="scss" scoped>
</style>